<template>
  <div class="list">
    <v-title :title="'全部商家'" />
    <arrow />
    <div class="main">
      <shop-list :list="list" :max="true" />
    </div>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
import PullUp from '@/components/PullUp'
import ShopList from './_Shop'
export default {
  components: {
    'v-title': Title,
    Arrow,
    PullUp,
    ShopList
  },
  data() {
    return {
      loading: false,
      list: [],
      queryList: {
        page: 0,
        pageSize: 5,
        busy: false
      }
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Uni.shopAll({ ...this.queryList }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped lang="stylus">
.list
  padding 55px 10px 10px 10px
  padding-bottom 20px
  .main
    margin-bottom 10px
</style>
